<template>
    <div class="edit-drawer">
        <drawer
            ref="drawerRef"
            :title="drawerTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form
                class="ls-form"
                ref="formRef"
                :rules="rules"
                :model="formData"
                label-width="80px"
            >
                <el-form-item label="名称" prop="name">
                    <el-input
                        class="ls-input"
                        v-model="formData.name"
                        placeholder="请输入名称"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input
                        class="ls-input"
                        v-model="formData.address"
                        placeholder="请输入地址"
                        clearable
                        />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input
                        class="ls-input"
                        v-model="formData.phone"
                        placeholder="请输入电话"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input
                        class="ls-input"
                        v-model="formData.email"
                        placeholder="请输入邮箱"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="域名" prop="domain">
                    <el-input
                        class="ls-input"
                        v-model="formData.domain"
                        placeholder="请输入域名"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input
                        class="ls-input"
                        v-model="formData.description"
                        placeholder="请输入描述"
                        clearable
                        type="textarea"
                        rows="4"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="isStop">
                    <el-radio-group v-model="formData.isStop">
                        <el-radio :label="0">正常</el-radio>
                        <el-radio :label="1">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="过期时间" prop="expiredAt">
                    <el-date-picker
                        v-model.number="formData.expiredAt"
                        type="datetime"
                        placeholder="请选择过期时间"
                        value-format="X"
                        clearable
                    />
                </el-form-item>
            </el-form>
        </drawer>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { tenantAdd, tenantDetail, tenantEdit } from '@/api/perms/tenant'
import Drawer from '@/components/drawer/index.vue'
import feedback from '@/utils/feedback'
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const drawerRef = shallowRef<InstanceType<typeof Drawer>>()
const mode = ref('add')
const drawerTitle = computed(() => {
    return mode.value == 'edit' ? '编辑租户' : '新增租户'
})

const formData = reactive({
    id: '',
    name: '', // 名称
    address: '', // 地址
    phone: '', // 电话
    email: '', // 邮箱
    domain: '', // 域名
    description: '', // 描述
    isStop: 0, // 是否停用
    expiredAt: null, // 过期时间
    menus: [] // 菜单列表
})

const rules = {
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const params = { ...formData, menuIds: formData.menus.join() }
    mode.value == 'edit' ? await tenantEdit(params) : await tenantAdd(params)
    drawerRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const handleClose = () => {
    emit('close')
}

const open = (type = 'add') => {
    mode.value = type
    if (type == 'add'){
        formRef.value?.resetFields()
    }
    drawerRef.value?.open()
}

const setFormData = async (row: Record<any, any>) => {
    const data = await tenantDetail({
        id: row.id
    })
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
     // 将data.expiredAt 转换为10位时间戳
    if (data.expiredAt != null) {
        formData.expiredAt = new Date(data.expiredAt).getTime() / 1000
    }
}

defineExpose({
    open,
    setFormData
})
</script>
